<template>
    <view class="content">
        <a-demo title="Item 模式">
            <!-- 设置列数 -->
            <view class="title">列数</view>
            <view class="buttons">
                <view class="button pure-button-block pure-button-primary">
                    <pure-button text="2列" @onClick="cols = 2"></pure-button>
                </view>
                <view class="button pure-button-block pure-button-success">
                    <pure-button text="3列" @onClick="cols = 3"></pure-button>
                </view>
                <view class="button pure-button-block pure-button-warning">
                    <pure-button text="4列" @onClick="cols = 4"></pure-button>
                </view>
            </view>

            <!-- 设置间距 -->
            <view class="title">间距</view>
            <view class="buttons">
                <view class="button pure-button-block pure-button-primary">
                    <pure-button text="10px" @onClick="gap = '10px'"></pure-button>
                </view>
                <view class="button pure-button-block pure-button-success">
                    <pure-button text="1em" @onClick="gap = '1em'"></pure-button>
                </view>
                <view class="button pure-button-block pure-button-warning">
                    <pure-button text="40rpx" @onClick="gap = '40rpx'"></pure-button>
                </view>
            </view>

            <!-- 瀑布流组件 -->
            <pure-waterfall :cols="cols" :gap="gap">
                <pure-waterfall-item v-for="(item, index) in list" :key="item.id" :item="item" :index="index" :loaded="item.loaded">
                    <view class="item">
                        <image class="item-image" :src="item.img" mode="widthFix" @load="handleLoad(item, index)" />
                        <view class="item-text">
                            <text>第 {{ index + 1 }} 个元素</text>
                        </view>
                        <view class="item-delete" hover-class="pure-hover" @tap.stop="handleDelete(item, index)">
                            <pure-icon name="__cuo"></pure-icon>
                        </view>
                    </view>
                </pure-waterfall-item>
            </pure-waterfall>

            <!-- 操作数组 -->
            <pure-gap></pure-gap>
            <view class="title">操作数据</view>
            <view class="buttons column">
                <view class="button pure-button-block pure-button-primary">
                    <pure-button text="向数据开头随机添加一条数据" @onClick="handleUnshift"></pure-button>
                </view>
                <view class="button pure-button-block pure-button-success">
                    <pure-button text="向数据末尾随机添加一条数据" @onClick="handlePush"></pure-button>
                </view>
                <view class="button pure-button-block pure-button-warning">
                    <pure-button text="向数据随机位置添加一条数据" @onClick="handleRandom"></pure-button>
                </view>
            </view>
        </a-demo>

        <!-- 加载更多 -->
        <view class="loadmore">
            <pure-loadmore :status="loadStatus"></pure-loadmore>
        </view>
    </view>
</template>

<script setup>
    import { ref } from "vue";
    import { onReady, onReachBottom } from "@dcloudio/uni-app";

    // 数据列表
    const list = ref([]);

    // 列数
    const cols = ref(2);

    // 间距
    const gap = ref("10px");

    // 加载下一页数据状态
    const loadStatus = ref("more");

    // 页数
    const pageIndex = 1;

    // 图片列表
    const imgs = [
        "https://gips0.baidu.com/it/u=567323913,331130417&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1000_1000",
        "http://gips3.baidu.com/it/u=775223787,1959096310&fm=3028&app=3028&f=JPEG&fmt=auto?w=1440&h=2560",
        "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
        "http://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        "https://gips3.baidu.com/it/u=3732737575,1337431568&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f1440_2560",
        "http://gips0.baidu.com/it/u=3560029307,576412274&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        "http://gips3.baidu.com/it/u=3892227616,2240763844&fm=3028&app=3028&f=JPEG&fmt=auto?w=3200&h=3200",
        "http://gips1.baidu.com/it/u=3885198370,1571719977&fm=3028&app=3028&f=JPEG&fmt=auto?w=2560&h=1920",
        "http://gips0.baidu.com/it/u=3557606594,2640240494&fm=3028&app=3028&f=JPEG&fmt=auto?w=2048&h=2048",
        "http://gips2.baidu.com/it/u=3589715542,620993072&fm=3028&app=3028&f=JPEG&fmt=auto?w=2048&h=2048",
        "http://gips0.baidu.com/it/u=398917425,2942293409&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
        "http://gips0.baidu.com/it/u=1370402140,2009956566&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        "http://gips2.baidu.com/it/u=3579059838,1031544773&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=720",
        "http://gips3.baidu.com/it/u=1121275038,3924754772&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
        "https://gips1.baidu.com/it/u=2622851591,902014643&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800",
        "http://gips2.baidu.com/it/u=658660608,3402622316&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
        "http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
        "http://gips3.baidu.com/it/u=3557221034,1819987898&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
        "http://gips1.baidu.com/it/u=1647344915,1746921568&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280",
        "http://gips3.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
    ];

    // 页面加载后
    onReady(async () => {
        // 初始化数据列表
        initList();
    });

    // 上拉触底
    onReachBottom(() => {
        // 加载下一页数据
        loadNext();
    });

    // 初始化数据列表
    function initList() {
        let items = [];
        for (let i = 0; i < 10; i++) {
            items.push({
                id: randomString(),
                loaded: false,
                img: imgs[i],
            });
        }
        list.value = items;
    }

    // 资源加载完成事件
    function handleLoad(item, index) {
        // 更新资源加载状态
        item.loaded = true;
    }

    // 删除元素
    function handleDelete(item, index) {
        // 删除元素
        list.value.splice(index, 1);
    }

    // 向数据开头随机添加一条数据
    function handleUnshift() {
        list.value.unshift({
            id: randomString(),
            loaded: false,
            img: imgs[getRandomIndex()],
        });
    }

    // 向数据末尾随机添加一条数据
    function handlePush() {
        list.value.push({
            id: randomString(),
            loaded: false,
            img: imgs[getRandomIndex()],
        });
    }

    // 向数据随机位置添加一条数据
    function handleRandom() {
        list.value.splice(getRandomCurrent(), 0, {
            id: randomString(),
            loaded: false,
            img: imgs[getRandomIndex()],
        });
    }

    // 0 - 19 之间的随机数
    function getRandomIndex() {
        return Math.floor(Math.random() * 20);
    }

    // 随机下标
    function getRandomCurrent() {
        return Math.floor(Math.random() * list.value.length - 1);
    }

    // 加载下一页数据
    function loadNext() {
        // 最多加载100条数据
        if (list.value.length >= 100) return (loadStatus.value = "nomore");

        // 模拟数据加载
        loadStatus.value = "loading";

        setTimeout(() => {
            if (pageIndex >= 2) {
                pageIndex = 1;
            }

            // 开始下标
            const startIndex = pageIndex === 1 ? 0 : 10;

            // 新数据
            const items = [];

            for (let i = startIndex; i < startIndex + 10; i++) {
                items.push({
                    id: randomString(),
                    loaded: false,
                    img: imgs[i],
                });
            }

            // 追加数据
            list.value.push(...items);

            // 加载状态
            loadStatus.value = "more";
        }, 1500);
    }

    // 生成一个36位的随机字符串
    function randomString() {
        return "item_" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    }
</script>

<style scoped>
    .title {
        font-weight: bold;
        margin-bottom: 10px;
    }

    .desc {
        font-size: var(--pure-font-size-smaller);
        line-height: 1.75;
        margin-bottom: 15px;
    }

    .desc-title {
        font-weight: bold;
        margin-bottom: 5px;
        color: var(--pure-theme-warning);
    }

    .buttons {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .column {
        flex-direction: column;
    }

    .button {
        flex: 1;
    }

    .item {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        border: 4px solid var(--pure-theme-primary);
        box-sizing: border-box;
        position: relative;
    }

    .item-image-box {
        background: var(--pure-theme-warning);
        overflow: hidden;
        width: 100%;
    }

    .item-image {
        display: block;
        width: 100%;
        height: 100%;
    }

    .item-text {
        padding: 12px 5px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 12px;
    }

    .item-delete {
        width: 30px;
        height: 30px;
        position: absolute;
        right: -4px;
        top: -4px;
        z-index: 2;
        background: var(--pure-theme-danger);
        box-sizing: border-box;
        color: #ffffff;
        font-size: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 0 15px;
    }
</style>
